<template>
    <div class="image-text-grid">
        <!-- 五行两列布局 -->
        <div class="grid-container">
            <div class="grid-item" v-for="item in itemList" :key="item.id">
                <div class="image-container">
                    <img :src="item.imageUrl">
                    <div class="text-overlay">
                        <p class="item-description">{{ item.shortDesc }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const url = 'http://localhost:3000/TokyoSpots/';
const itemList = ref([]);

axios.get(url)
    .then(response => {
        itemList.value = response.data;
    })
    .catch(error => {
        console.error('Error fetching items:', error);
    });
</script>

<style lang="css" scoped>
.image-text-grid {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-auto-rows: minmax( auto); 
    gap: 15px; 
}

.grid-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
}

.image-container {
    position: relative;
    width: 170px;
    height: 0;
    padding-bottom: 100%; 
}

.item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 15px 10px 10px;
    color: white;
}

.item-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

</style>